<template>
  <div class="baike-home">
    <!--    <div class="baike-title-box">-->
    <!--      <div class="baike-title-desc min-1200"><p>-->
    <!--        为你揭秘各职业的工作内容｜薪资水平｜岗位晋升｜能力搭建… <br>助你求职决策及入行后快速学习-->
    <!--      </p></div>-->
    <!--    </div>-->

    <div class="min-1200 baike-mian" style="">
      <div style="">
        <div class="about" style="display: none; margin-top:0;">
          <div class="about-content">
            <div class="ing-data about-min">
               <!--  左边 InfiniteScroll-->
                  <div class="left_area">
                    <div class="data-item">
                      <div class="title_row title">
                        <div class="left">
                            <img alt="" src="">
                            <h3 style="color:;">你的期望职位</h3>
                        </div>
                        <div class="right" style="">
                            <a class="all" style="">求职意向</a>&nbsp;<i class="el-icon-arrow-right"></i>
                        </div>
                      </div>

                      <div>
                        <!-- <template>-->
                        <ul class="ul_list infinite-list" v-infinite-scroll="load" style="overflow:auto">
                          <li v-for="i in count"  class="list-item infinite-list-item">
                            <img alt="" class="list-img"  src="https://sxsimg.shixiseng.com/static_exam/img/face1.ad2e1b8.png">
                            <div class="list-desc" style="width: 458px;cursor: pointer;">
                              <h3>后端开发工程师</h3>
                              <div> 负责计算机产品的服务器端研发，通过代码、API 和数据库集成构建服务端架构，提高网站、应用程序或软件的运行效率，为前端提供支持的专业技术人员。</div>
                            </div>
                          </li>
                        </ul>
                        <p v-if="noMore">没有更多了</p>
                        <!-- </template>-->
                      </div>
                  </div>
              </div>
                <!--  右边 InfiniteScroll-->
                   <div class="left_area">
                      <div class="data-item">
                        <div class="title_row title">
                          <div class="left">
                            <img alt="" src="">
                            <h3 style="color:;">你的期望职位</h3>
                          </div>
                          <div class="right" style="">
                            <a class="all" style="">求职意向</a>&nbsp;<i class="el-icon-arrow-right"></i>
                          </div>
                        </div>
                        <div>
                          <!-- <template>-->
                          <ul  class="menu-list" style="">
                            <li class="active"> 信息工程</li>
                          </ul>
                          <ul class="ul_list infinite-list" v-infinite-scroll="load" style="overflow:auto">
                            <li v-for="i in count"  class="list-item infinite-list-item">
                              <img alt="" class="list-img"  src="https://sxsimg.shixiseng.com/static_exam/img/face1.ad2e1b8.png">
                              <div class="list-desc" style="width: 458px;cursor: pointer;">
                                <h3>后端开发工程师</h3>
                                <div> 负责计算机产品的服务器端研发，通过代码、API 和数据库集成构建服务端架构，提高网站、应用程序或软件的运行效率，为前端提供支持的专业技术人员。</div>
                              </div>
                            </li>
                          </ul>
                          <p v-if="noMore">没有更多了</p>
                          <!-- </template>-->
                        </div>
                      </div>
                   </div>
            </div>
           </div>
        </div>
<!--        百科排行榜-->
        <div class="ranking" style="margin-top:40px;">
          <div class="title">
            <div class="left"><!----> <span class="line"></span>
              <h3 style="color:;">百科排行榜</h3></div>
            <div class="right"></div>
          </div>
          <div>
            <div class="rank-min" style="display: flex; justify-content: space-between; margin-top: 24px">
              <!-- 薪资榜-->
              <div class="rank-box">
                <div class="rank-box-copy" style="width: 344px; margin: 0 auto">
                  <div class="title">
                    <div class="left">
                      <img alt="" src="https://sxsimg.shixiseng.com/static_exam/img/i-xz.cde1fa2.png">
                        <h3 style="color:#FF7449;">薪资榜</h3>
                    </div>
                    <div class="right">
                      <div class="tabs">
                        <div class="tab active">实习</div>
                        <span class="line">丨</span>
                        <div class="tab">校招</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div>
                  <div>
                    <ul class="rank-list">
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc"
                        >软件测试工程师</span></h3> <span
                        >250-400/天</span></div>
                        <p>
                          根据产品需求，对软件功能、性能等各方面实施测验和质量把控的技术人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc">健身教练</span>
                        </h3> <span>200-400/天</span></div>
                        <p>
                          为普通人提供健身指导，帮助顾客调整体重、提升身体素质和运动表现的人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc"
                        >hadoop 工程师</span></h3> <span
                        >300-400/天</span></div>
                        <p>
                          设计、构建和维护分布式计算基础设施，评估数据解决方案的大数据工程师。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">4</span><span class="desc">房产销售</span>
                        </h3> <span>200-400/天</span></div>
                        <p>
                          从事房地产租赁、买卖，以及客户资源开发与维护的人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">5</span><span class="desc">移动开发</span>
                        </h3> <span>250-400/天</span></div>
                        <p>
                          移动开发工程师是指负责移动端APP的设计、开发、测试以及维护的专业人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">6</span><span class="desc">测试工程师</span>
                        </h3> <span>200-300/天</span></div>
                        <p>
                          负责系统或产品安全，按照一定标准，对功能、性能、安全合规等进行测试，发现缺陷，并出具测试报告的专业技术人员。
                        </p></li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- 24小时最热-->
              <div class="rank-box">
                <div class="rank-box-copy" style="width: 344px; margin: 0 auto">
                  <div class="title">
                    <div class="left"><img
                      alt="" src="https://sxsimg.shixiseng.com/static_exam/img/i-hot.122410a.png"
                    > <!----> <h3 style="color:#FF5340;">24小时最热</h3></div>
                    <div class="right"></div>
                  </div>
                </div>
                <div>
                  <div>
                    <ul class="rank-list">
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc">测试工程师</span>
                        </h3></div>
                        <p>
                          负责系统或产品安全，按照一定标准，对功能、性能、安全合规等进行测试，发现缺陷，并出具测试报告的专业技术人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc">票务预定员</span>
                        </h3></div>
                        <p>
                          在票务代理机构中，为客户提供咨询服务，提供报价、出票、退票、改签等工作的人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon"></span><span class="desc">海外运营</span>
                        </h3></div>
                        <p>
                          负责海外市场的产品及服务，达到拉新、促活、营收等推广目标的人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">4</span><span class="desc">视觉设计师</span>
                        </h3></div>
                        <p>
                          为印刷品、网站或App、商品包装、环境装置等进行可视艺术设计，塑造外观美感的专业人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">5</span><span class="desc">英语翻译</span>
                        </h3></div>
                        <p>
                          以口头或书面形式，在英语和其他语言之间进行信息转换的专业人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">6</span><span class="desc">外贸销售</span>
                        </h3></div>
                        <p>
                          从事对外贸易业务的销售人员。
                        </p></li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- 最新上线-->
              <div class="rank-box">
                <div class="rank-box-copy" style="width: 344px; margin: 0 auto">
                  <div class="title">
                    <div class="left"><img alt="" src="https://sxsimg.shixiseng.com/static_exam/img/i-inlne.9351f61.png">
                      <h3 style="color:#1BC88B;">最新上线</h3>
                    </div>
                    <div class="right"></div>
                  </div>
                </div>
                <div>
                  <div>
                    <ul class="rank-list">
                      <li class="rank-item">
                        <div class="r-title">
                          <h3 class="title">
                            <span class="icon"></span>
                            <span class="desc" >DSP开发工程师</span>
                          </h3>
                        </div>
                        <p>
                          从事DSP技术（数字信号处理）的专业人员，以数字信号对信号进行采集、变换、滤波、估值、增强、压缩、识别等处理。
                        </p>
                      </li>
                      <li class="rank-item">
                        <div class="r-title">
                          <h3 class="title">
                            <span class="icon"></span>
                            <span class="desc" >ARM开发工程师</span>
                          </h3></div>
                        <p> 是使用ARM嵌入式Linux操作系统进行内核编译及文件系统制作，使用相关开发工具进行ARM软、硬件开发设计的专业技术人员。</p>
                      </li>
                      <li class="rank-item">
                        <div class="r-title">
                          <h3 class="title"><span class="icon"></span>
                            <span class="desc">电路设计师</span>
                        </h3></div>
                        <p> 设计、测试、调试电子电路设备、工艺及质量的专业人员。</p>
                      </li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">4</span>
                          <span class="desc" >FPGA开发工程师</span>
                        </h3></div>
                        <p>   在数字集成电路领域，从事现场可编程门阵列集成电路（FPGA）设计、开发、调试的专业人员。</p>
                      </li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">5</span><span class="desc"
                        >嵌入式开发工程师</span></h3></div>
                        <p>
                          使用C/C++语言、汇编语言进行硬件驱动系统、嵌入式操作系统开发的工程技术人员。
                        </p></li>
                      <li class="rank-item">
                        <div class="r-title"><h3 class="title"><span
                          class="icon">6</span><span class="desc"
                        >无线/射频通信工程师</span></h3></div>
                        <p>
                          从事终端产品硬件的无线/射频设计、开发、优化、测试和维护的专业人员。
                        </p></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
// 职位百科排行榜
export default {
  name: 'baike-title',
  data () {
    return {
      count: 4,
      loading: false
    }
  },
  computed: {
    noMore () {
      return this.count >= 6
    },
  },
  methods: {
    load () {
      if (this.count>=4) return
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style scoped>

li, ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.baike-home {
  background: #fff
}

.baike-mian {
  position: relative;
  top: -83px
}

.min-1200 {
  width: 1200px;
  margin: 0 auto
}

.about {
  margin: 40px 0 0;
}
.about-content .ing-data{
  min-height: 270px;
  margin: 0;
  /* border: #333333 1px solid;*/
  display: flex;
  justify-content: space-between;
}
.ing-data .left_area{
  position: relative;
  background: #eef5ff;
  border-radius: 4px;
  height: 270px;
  box-sizing: border-box;
  width: 592px;
  padding: 20px 0 24px 20px;
}
.ing-data .left_area .data-item{
  height: 40px;
  width: 100%;
}
.ing-data .left_area .data-item .title_row{
  display: flex;
  margin-right: 15px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.ing-data .left_area .data-item .title_row .left h3{
  color: #292929;
  font-weight: 500;
  font-size: 16px;
  margin: 0;
  padding-left: 10px;
  font-family: PingFangSC-Medium,PingFang SC,sans-serif;
}
.ing-data .left_area .data-item .title_row .right
{
  width: 80px;
  height: 40px;
  line-height: 40px;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #696969;
  cursor:pointer;
}
.ing-data .left_area .data-item .ul_list{
  font-size: 14px;
  font-weight: 400;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 182px;
  overflow-y: auto;
  margin-top: 15px;
  position: relative
}
.left_area .data-item .ul_list .list-item{
  width: 548px;
  height: 88px;
  background: #fff;
  cursor: pointer;
  padding: 18px 16px;
  box-sizing: border-box;
  display: -webkit-flex;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 12px;
}
.data-item .ul_list .list-item .list-img{
  width: 46px;
  height: 46px;
  border-radius: 4px;
  margin-right: 12px
}
.ing-data .left_area .ul_list .list-item .list-desc h3 {
  font-size: 16px;
  font-family: PingFangSC-Medium,PingFang SC,sans-serif;
  font-weight: 500;
  color: #292929;
  margin-bottom: 4px;
  line-height: 24px;
}
.ing-data .left_area .data-item .ul_list .list-item .list-desc div {
  width: 100%;
  font-size: 14px;
  color: #424242;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.ing-data .left_area .data-item .menu-list li.active {
  border: 1px solid #2684ff!important;
  color: #2684ff;
}
.ing-data .left_area .data-item .menu-list li{
  position: relative;
  cursor: pointer;
  padding: 3px 8px;
  box-sizing: border-box;
  height: 26px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #ccc;
  margin-right: 10px;
  font-size: 14px;
  color: #424242;
  line-height: 20px;
}
.data-item .menu-list,
.data-item .menu-list li{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.ing-data .left_area .data-item .menu-list li.active:after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  background: url() no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  bottom: -8px;
}

/* .ing-data .left_area .data-item .title_row .right::after {*/
/*   display: block;*/
/*   content: "";*/
/*   width: 12px;*/
/*   height: 12px;*/
/*   background: url() no-repeat;*/
/*   background-size: 100% 100%;*/
/* }*/
/* .ing-data .left .data-item {*/
/*   position: relative;*/
/*   height: 100%;*/
/* }*/
/* .ing-data .title .left, .title {*/
/*   !* display: -webkit-box; *!*/
/*   !* display: -webkit-flex; *!*/
/*   display: -ms-flexbox;*/
/*   display: flex;*/
/*   -webkit-box-align: center;*/
/*   !* -webkit-align-items: center; *!*/
/*   -ms-flex-align: center;*/
/*   align-items: center;*/
/* }*/

/* .ing-data .title .left img {*/
/*   display: block;*/
/*   width: 18px;*/
/*   height: 18px;*/
/*   margin-right: 12px;*/
/* }*/
/* .ing-data .data-item .left h3 {*/
/*   font-size: 18px!important;*/
/*   line-height: 25px!important;*/
/* }*/

/* .ing-data .title .left h3 {*/
/*   font-size: 24px;*/
/*   font-family: PingFangSC-Medium,PingFang SC,sans-serif;*/
/*   font-weight: 500;*/
/*   color: #292929;*/
/*   line-height: 33px;*/
/* }*/


/* 百科排行榜*/
.ranking {
  margin-top: 60px
}

.rank-min {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 32px
}

.rank-min .rank-box {
  width: 384px;
  box-sizing: border-box;
  padding: 20px 0 0;
  border: 1px solid #eee;
  border-radius: 4px
}

.rank-min .rank-box > .rank-box-copy {
  position: relative;
  padding-bottom: 24px
}

.rank-min .rank-box > .rank-box-copy:after {
  height: 1px;
  width: 344px;
  content: "";
  display: block;
  background: #eee;
  position: absolute;
  bottom: 0;
  left: 0
}

.rank-min .rank-box .left img {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0
}

.title .left, .title {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.rank-min .rank-box .left h3 {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
  font-weight: 500;
  color: #292929;
  line-height: 25px
}

.rank-min .rank-box:first-of-type {
  border-top: 5px solid #ffd6b7
}

.rank-min .rank-box:nth-of-type(2) {
  border-top: 5px solid #ffc6c0
}

.rank-min .rank-box:nth-of-type(3) {
  border-top: 5px solid #a8ebd3
}

.rank-item {
  box-sizing: border-box;
  padding: 24px 20px;
  cursor: pointer;
  position: relative;
  -webkit-transition: .2s;
  transition: .2s
}

.rank-item:after {
  height: 1px;
  width: 344px;
  content: "";
  display: block;
  background: #eee;
  position: absolute;
  bottom: 0
}

.rank-item:hover {
  background: #fafafa
}

.rank-item:hover:after {
  display: none
}

.rank-item:last-of-type {
  margin: 0
}

.rank-item:last-of-type:after {
  display: none
}

.rank-item .r-title {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.title .left .line {
  display: block;
  width: 5px;
  height: 24px;
  background: -webkit-linear-gradient(top, #2684ff, rgba(38, 132, 255, 0));
  background: linear-gradient(180deg, #2684ff, rgba(38, 132, 255, 0));
  border-radius: 1px;
  margin-right: 8px;
}

.rank-item .r-title .title, .rank-item .r-title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}

.rank-item .r-title .title .desc, .rank-item .r-title .title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
  font-weight: 500;
  color: #292929;
  line-height: 24px
}

.rank-item .r-title .title .desc {
  width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis
}

.rank-item .r-title .title .icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 14px;
  color: #292929;
  line-height: 19px;
  margin-right: 12px
}

.rank-item .r-title .title .icon, .rank-item .r-title > span {
  font-family: Oswald-Medium, Oswald, sans-serif;
  font-weight: 500
}

.rank-item .r-title > span {
  font-size: 16px;
  color: #2684ff;
  line-height: 21px
}

.rank-item p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  margin-top: 8px;
  font-size: 14px;
  color: #9b9b9b;
  line-height: 18px;
  padding-left: 30px
}

.rank-item:first-of-type .title .icon {
  background: url(https://sxsimg.shixiseng.com/static_exam/img/1.7078b76.png) no-repeat;
  background-size: 100% 100%
}

.rank-item:nth-of-type(2) .title .icon {
  background: url(https://sxsimg.shixiseng.com/static_exam/img/2.c78ed88.png) no-repeat;
  background-size: 100% 100%
}

.rank-item:nth-of-type(3) .title .icon {
  background: url(https://sxsimg.shixiseng.com/static_exam/img/3.02df141.png) no-repeat;
  background-size: 100% 100%
}

.tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.tabs .tab {
  font-size: 16px;
  color: #292929;
  line-height: 22px;
  cursor: pointer
}

.tabs .tab.active {
  color: #2684ff
}

.tabs .line {
  display: block;
  height: 22px;
  font-size: 16px;
  width: 14px;
  color: #dcdee0;
  line-height: 22px
}

</style>
